<script setup lang="ts">
import { ref, computed,onBeforeMount } from 'vue'
import Chat from '@/components/business/Chat/index.vue'
import { MsgType, RenderType, Sender } from '@/components/business/Chat/enum'

const chatRef = ref(null)
const textVal = ref('')
const reAnswer = ref('')
const msgLoadStatus = ref(false)
const inputDisabled = ref(false)
const chatOption = ref({
	url: '/pocapi/api/integration/flow/apiDef/call/',
	method: 'post',
	isStream: false,
	headers: {
		Authorization: '',
	},
	defaultList: [
		{
			msgType: MsgType.Text,
			sender: Sender.System,
			content: '你好，我是chat, 很高兴遇见你！',
			thinkStatus: false,
			answerStatus: false,
		},
	],
	avatar: {
		user: '',
		reply: '',
	},
	thinkText: '思考中...',
	renderType: RenderType.Zhinengwenshu,
})

const inputClass = computed(() => {
	if (inputDisabled.value || msgLoadStatus.value) {
		return 'disabled'
	}
	return ''
})

function sendMsg(e) {
	if (e?.shiftKey) {
		return
	}
	e.preventDefault && e.preventDefault()

	const text = textVal.value || reAnswer.value
	const data = {
		question: text,
		currentContent: text,
	}
	chatRef.value.onSendMsg(data)
	textVal.value = reAnswer.value = ''
}

function handleReAnswer(obj: any) {
	console.log(obj, 'obj')
	reAnswer.value = obj.content
	sendMsg({})
}

onBeforeMount(() => {
	chatOption.value.url += window.webConfigData.zhinengwenshu.id
	chatOption.value.headers.Authorization = window.webConfigData.zhinengwenshu.Authorization
})
</script>

<template>
	<div class="demo-chat-route">
		<header>
			<div class="logo">
				<img src="@/imgs/wenshu-logo-0x002.png" alt="" /><span data-v-060f498c="" class="title">智能问数</span>
			</div>
		</header>
		<div class="section">
			<div class="msg-container">
				<Chat
					ref="chatRef"
					v-bind="chatOption"
					v-model:msgLoadStatus="msgLoadStatus"
					@on-re-answer="handleReAnswer"
				></Chat>
			</div>
			<div :class="['input-container', inputClass]">
				<textarea v-model="textVal" placeholder="请输入" @keydown.enter="sendMsg"></textarea>
				<el-button type="primary" @click="sendMsg">发送</el-button>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.demo-chat-route {
	height: 100vh;
	background: #f6f7fb;
	$head-height: 60px;
	$input-height: 80px;
	header {
		height: 60px;
		padding: 0 12px;
		display: flex;
		align-items: center;
		box-shadow: 0 5px 5px hsla(0, 0%, 47%, 0.2);
		.logo {
			display: flex;
			align-items: center;
			img {
				height: 32px;
			}
			span {
				font-size: 22px;
				margin-left: 8px;
			}
		}
	}
	.section {
		width: 1200px;
		margin: 0 auto;
		height: calc(100% - $head-height);
		padding: 10px 0;

		.msg-container {
			height: calc(100% - $input-height);
			// border: 1px solid rgba(226, 230, 239, 1);
			border-radius: 4px;
			:deep(.chat-com) {
				padding: 20px;
			}
		}
		.input-container {
			height: $input-height;
			width: 100%;
			background: #fff;
			border-radius: 29px;
			border: 1px solid #dddde7;
			border-radius: 16px;
			box-shadow: 0 -2px 2px hsla(0, 0%, 47%, 0.2);
			padding: 24px 16px;
			display: flex;
			position: relative;
			&.disabled {
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					// background: rgba(0, 0, 0, 0.1);
					cursor: not-allowed;
				}
			}
			textarea {
				flex: 1;
				height: 100%;
				border: none;
				padding: 0 10px;
				resize: none;
				&::-webkit-scrollbar {
					width: 3px !important;
					height: 3px !important;
				}
			}
		}
	}
}
</style>
